<!DOCTYPE html>
<html>
<head lang="en">
	<meta charset="UTF-8">
<title>带关闭按钮的滚动广告</title>
<style type="text/css">
#main{ text-align:center;}
#float{
	position:absolute;
	left:30px;
	top:60px; 
	z-index:1;
	}
#close{
	position:absolute;
	top:60px;
	left:134px;
	z-index:2;
	cursor:hand;
}
</style>
</head>
<body>
<div id="close" onClick="adv_close()"><img src="images/close.jpg"></div>
<div id="float"><img src="images/advpic.jpg"></div>
<div id="main"><img src="images/contentpic.jpg"></div>
<script>
//获取元素的属性
  var adverTop;//存储广告层距离顶端的位置
  var adverLeft;
  var adverObj;
   var adverTop1;//存储广告层距离顶端的位置
  var adverLeft1;
  var adverObj1;
  function inix()
  {
	  adverObj=document.getElementById("float");
	  adverTop=parseInt(document.defaultView.getComputedStyle(adverObj,null).top);//10px
	 adverLeft=parseInt(document.defaultView.getComputedStyle(adverObj,null).left);//20px	
	 adverObj1=document.getElementById("close");
	  adverTop1=parseInt(document.defaultView.getComputedStyle(adverObj1,null).top);//10px
	 adverLeft1=parseInt(document.defaultView.getComputedStyle(adverObj1,null).left);//20px	
  }
  function move()
  {
	 var sTop=parseInt(document.documentElement.scrollTop||document.body.scrollTop);  
	 var sLeft=parseInt(document.documentElement.scrollLeft||document.body.scrollLeft);
	 //alert(adverLeft);
	 var moveObj=sTop+adverTop+"px";
	 var moveLeft=sLeft+adverLeft+"px";
	  var moveObj1=sTop+adverTop1+"px";
	 var moveLeft1=sLeft+adverLeft1+"px";
	//alert(moveLeft);
  //更改广告层的位置样式
    adverObj.style.top=moveObj;
	adverObj.style.left=moveLeft;
	 adverObj1.style.top=moveObj1;
	adverObj1.style.left=moveLeft1;
  	  
  }
  window.onload=inix;//页面加载调用函数
  window.onscroll=move;//  //滚动条滚动效果
 function adv_close(){
 	document.getElementById("close").style.display="none";
 	document.getElementById("float").style.display="none";
 }
</script>

</body>
</html>
